
import React,{Fragment} from "react";
import {Button, Form} from "antd";
import FormInput from "../form/FormInput";
import {observer} from "mobx-react";
import FormUpload from "../form/FormUpload";
import FormMulInput from "../form/FormMulInput";
import FormSelect from "../form/FormSelect";
import FormMulSelect from "../form/FormMulSelect";
import FormTimePicker from "../form/FormTimePicker";
import FormDatePicker from "../form/FormDatePicker";
import FormMonthPicker from "../form/FormMonthPicker";
import FormYearPicker from "../form/FormYearPicker";
import FormRadio from "../form/FormRadio";
import FormCheckBox from "../form/FormCheckBox";
import FormPointPicker from "../form/FormPointPicker";
import FormPasswordInput from "../form/FormPasswordInput";
import FormTimeRangePicker from "../form/FormTimeRangePicker"
import FormDateRangePicker from "../form/FormDateRangePicker"
import FormMonthRangePicker from "../form/FormMonthRangePicker"
import FormYearRangePicker from "../form/FormYearRangePicker"
import FormTreeSelect from "../form/FormTreeSelect"
import {urlEncode} from "../../libs/funcs";
/**
 * 根据配置渲染的表单组件
 */
@observer
class ActionForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            href:""
        }
    }

    handleButtonClick = (href,name) => {
        this.props.form.validateFields((err, formData) => {
            if (!err){
                this.setState({
                    href:href + `?${name}=1` + urlEncode(formData)
                });
            }
        });
    };

    render() {
        const {config} = this.props;
        return (
            <Fragment>
                <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
                    {config.map((item,index) => {
                        if (item["component"] === "FormUpload"){
                            console.log(item["single"],"--------------------")
                            return <FormUpload key={index} form={this.props.form} field={item["field"]}  label={item["label"]} single={item["single"]} fileType={item["fileType"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormInput"){
                            return <FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]} addonAfter={item["addonAfter"]} addonBefore={item["addonBefore"]}/>
                        }else if (item["component"] === "FormMulInput"){
                            return <FormMulInput key={index} form={this.props.form} label={item["label"]} field={item["field"]}  placeholder={item["placeholder"]} rows={item["rows"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormSelect"){
                            return <FormSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} allowClear={item["allowClear"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormMulSelect"){
                            return <FormMulSelect key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} showSearch={item["showSearch"]} placeholder={item["placeholder"]} allowClear={item["allowClear"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]} />
                        }else if (item["component"] === "FormTimePicker"){
                            return <FormTimePicker key={index} form={this.props.form}  label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormDatePicker"){
                            return <FormDatePicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormMonthPicker"){
                            return <FormMonthPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormYearPicker"){
                            return <FormYearPicker key={index} form={this.props.form} label={item["label"]} field={item["field"]} disabled={item["disabled"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} />
                        }else if (item["component"] === "FormRadio"){
                            return <FormRadio key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormCheckBox"){
                            return <FormCheckBox key={index} form={this.props.form} label={item["label"]} field={item["field"]} options={item["options"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormPointPicker"){
                            return <FormPointPicker key={index} form={this.props.form} placeholder={item["placeholder"]} field={item["field"]} initialValue={item["initialValue"]} rules={item["rules"]}  disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormPasswordInput"){
                            return <FormPasswordInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                        }else if (item["component"] === "FormTimeRangePicker"){
                            return <FormTimeRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormDateRangePicker"){
                            return <FormDateRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormMonthRangePicker"){
                            return <FormMonthRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if (item["component"] === "FormYearRangePicker"){
                            return <FormYearRangePicker key={index} form={this.props.form} label={item["label"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} start={item["start"]} end={item["end"]} rules={item["rules"]}/>
                        }else if(item["component"] === "FormTreeSelect"){
                            return <FormTreeSelect key={index} form={this.props.form} label={item["label"]}  treeData={item["options"]}  initialValue={item["initialValue"]} disabled={item["disabled"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} rules={item["rules"]} showLeafOnly={item["showLeafOnly"]} ext_config={item["ext_config"]}/>
                        }else if (item["component"] === "BUTTON"){
                            return <div key={index} style={{width:528,margin:"0 auto"}}><Button href={this.state.href} icon={item["icon"]} size={item["size"]} target={item["target"]} type={item["type"]} block={item["block"]} onClick={(e) => {this.handleButtonClick(item["href"],item["name"]);return false;}}>{item["label"]}</Button></div>
                        }else {
                            return <FormInput key={index} form={this.props.form} label={item["label"]} field={item["field"]} allowClear={item["allowClear"]} placeholder={item["placeholder"]} initialValue={item["initialValue"]} rules={item["rules"]} disabled={item["disabled"]}/>
                        }
                    })}
                </Form>
            </Fragment>
        )
    }
}
export default ActionForm

